<template>
    <div class="cusList">
        <div class="cusListTop">
            <span class="cusListMonth" @click="isPop">{{month}}月&nbsp;&nbsp;<img src="@/images/neitui/sanjiao.png" style="width:12px"></span>
            <span class="cusListNumber">新增{{data.number}}人</span>
        </div>
        <div class="cusListBottons" v-if="is_effective==1">
            <button class="cusListActiveButton">有效客户{{data.effective}}人</button>
            <button @click="cusButtonChange(0)">待定客户{{data.invalid}}人</button>
        </div>
        <div class="cusListBottons" v-else>
            <button @click="cusButtonChange(1)">有效客户{{data.effective}}人</button>
            <button class="cusListActiveButton">待定客户{{data.invalid}}人</button>
        </div>
        <ul v-if="data.month_list.length>0">
            <li v-for="(item,index) in data.month_list" :key="index" class="cusDetailLists">
                <div style="color:#333333;font-size:15px;line-height:3em">
                    <span>{{item.week}}</span>
                    <span style="float:right">合计：<span style="color:#FF4C50">{{item.count}}</span>人</span>
                </div>
                <ul>
                    <li v-for="(item1,index1) in item.user_list" :key="index1" style="overflow:hidden;margin-bottom:20px">
                        <div class="cusDetailMsg">
                            <span><img :src="item1.head_ico" alt=""></span>
                            <div style="margin-left:7px">
                                <span style="font-size:13px;line-height:2em;color:#333333">{{item1.user_name}}</span>
                                <span style="font-size:12px;color:#666666">{{item1.create_time}}</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
        <div style="text-align:center;padding-top:50px" v-else>
            <img src="@/images/neitui/21.png" alt="" style="width:275px">
            <p style="margin-top:10px">暂无用户</p>
        </div>
        
    </div>
</template>

<script>

    export default {
        name: "cusList",
        components:{
            
        },
        data() {
            return {
                // month:'',
                // monthList:[1,2,3,4,5,6,7,8,9,10,11,12],
                // yearList:[2017,2018,2019,2020,2021,2022,2023,2024,2025,2026,2027,2028,2029,2030]
            };
        },
        props:['data','is_effective','month'],
        methods:{
            cusButtonChange:function(is_effective){
                this.$emit('cusButtonChange',is_effective)
            },
            isPop:function(){
                this.$emit('isPopChange',true)
            }
        },
        created(){
        
        },
        mounted(){
            // this.month=(new Date).getMonth()+1
        
        }
    }
</script>

<style scoped lang="scss">
    .cusList{
            .cusDetailLists{
                width: 92vw;
                margin: 0 auto;
            }
            .cusDetailMsg{
                float: left;
                >span{
                    width:45px;
                    height: 45px;
                    border-radius: 50%;
                    overflow: hidden;
                    display: inline-block;
                    vertical-align: middle;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                >div{
                    display: inline-block;
                    vertical-align: middle;
                    span{
                        display: block;
                    }
                }
            }
        border-top:1px solid #f5f5f5;
        .cusListTop{
            width: 92vw;
            margin: 0 auto;
        }
        .cusListMonth{
            font-size: 24px;
            color: #333333;
            line-height: 3em;
        }
        .cusListNumber{
            font-size: 15px;
            color: #333333;
            float: right;
            margin-top: 25px;
        }
        .cusListBottons{
            width: 92vw;
            margin: 0 auto;
            border: 1px solid #5AB7FF;
            border-radius: 100px;
            display: flex;
            justify-content: space-between;
            height:50px;
            font-size: 15px;
            color: #333333;
            background: #ffffff;
            button{
                width:49%;
                background: #ffffff;
                border:none;
                outline: none;
                border-radius: 100px;
                
            }
            .cusListActiveButton{
                background: #5AB7FF;
                color: #ffffff;
            }
        }
        
    }
    
</style>
